<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import Header from "./components/header.vue";
import Side from "./components/side.vue";
import Card from "./components/card.vue";
import { Decimal } from "decimal.js";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

// let x = new Decimal(123.4567);
// let y = new Decimal("123456.7e-3");
// let z = new Decimal(x);
// let bool = x.equals(y) && y.equals(z) && x.equals(z); // true
// console.log(bool);

// // Decimal.set({ precision: 20 });
// var a = new Decimal("0.1");
// var b = new Decimal("0.2");
// console.log(a.plus(b).toString()); // 输出 "0.3"

// const num1 = new Decimal("0.12365");
// const num2 = new Decimal(100); // 也可以使用数字来创建 Decimal 对象

// const sum = num1.plus(num2); // 加法
// const difference = num1.minus(num2); // 减法
// const product = num1.times(num2); // 乘法
// const quotient = num1.dividedBy(num2); // 除法

// console.log(sum.toString());
// console.log(difference.toString());
// console.log(product.toString());
// console.log(quotient.toString());

// Decimal.config({
//   precision: 20, // 设置精度为20位
//   rounding: Decimal.ROUND_HALF_UP, // 设置舍入模式
// });

// const divisionResult = new Decimal("1").dividedBy(new Decimal("3"));
// console.log(divisionResult.toString()); // 输出 "0.33333333333333333333"

// const absValue = num1.abs(); // 绝对值
// const isGreaterThan = num1.greaterThan(num2); // 比较大小
// const power = num1.pow(2); // 幂运算
// console.log(absValue);
// console.log(isGreaterThan);
// console.log(power);

// const numAsString = num1.toString(); // 转换为字符串
// const numAsNumber = num1.toNumber(); // 转换为数字
// console.log(numAsString);
// console.log(numAsNumber);
//
const rightContent = ref(null);

const subMenuList = reactive({
  1: [
    {
      index: "1",
      title: "规划审核",
      content: "规划审核",
    },
    {
      index: "2",
      title: "设计库",
      content: "设计库",
    },
    {
      index: "2",
      title: "设计审核",
      content: "设计审核",
    },
    {
      index: "3",
      title: "施工验收",
      content: "施工验收",
    },
    {
      index: "4",
      title: "传输调度",
      content: "传输调度",
    },
    {
      index: "5",
      title: "数据加载",
      content: "数据加载",
    },
    {
      index: "6",
      title: "告警检查",
      content: "告警检查",
    },
    {
      index: "7",
      title: "性能评估",
      content: "性能评估",
    },
    {
      index: "8",
      title: "单站验证",
      content: "单站验证",
    },
    {
      index: "9",
      title: "覆盖分析",
      content: "覆盖分析",
    },
    {
      index: "10",
      title: "网络结构",
      content: "网络结构",
    },
    {
      index: "11",
      title: "精准规划",
      content: "精准规划",
    },
  ],

  2: [
    {
      index: "1",
      title: "无线仿真",
      content: "无线仿真",
    },
    {
      index: "2",
      title: "规划审核",
      content: "规划审核",
    },
    {
      index: "3",
      title: "宏站规划",
      content: "宏站规划",
    },
    {
      index: "4",
      title: "室分规划",
      content: "室分规划",
    },
    {
      index: "5",
      title: "规划武器库",
      content: "规划武器库",
    },
    {
      index: "6",
      title: "定时调度",
      content: "定时调度",
    },
    {
      index: "7",
      title: "用户管理",
      content: "用户管理",
    },
    {
      index: "8",
      title: "AIDP工具",
      content: "AIDP工具",
    },
  ],

  3: [
    {
      index: "1",
      title: "全景概览",
      content: "全景概览",
    },
    {
      index: "2",
      title: "参数查询",
      content: "参数查询",
    },
    {
      index: "3",
      title: "参数核查",
      content: "参数核查",
    },
    {
      index: "4",
      title: "参数配置",
      content: "参数配置",
    },
    {
      index: "5",
      title: "专题分析",
      content: "专题分析",
    },
    {
      index: "6",
      title: "统计报表",
      content: "统计报表",
    },
    {
      index: "7",
      title: "OMC管控",
      content: "OMC管控",
    },
  ],

  4: [
    {
      index: "1",
      title: "集中性能",
      content: "集中性能",
    },
    {
      index: "2",
      title: "集中路测",
      content: "集中路测",
    },
    {
      index: "3",
      title: "专项优化",
      content: "专项优化",
    },
    {
      index: "4",
      title: "集中投诉",
      content: "集中投诉",
    },
    {
      index: "5",
      title: "集中感知",
      content: "集中感知",
    },
    {
      index: "6",
      title: "系统配置",
      content: "系统配置",
    },
    {
      index: "7",
      title: "质量评估",
      content: "质量评估",
    },
  ],

  5: [
    {
      index: "1",
      title: "容量分",
      content: "容量分",
    },
    {
      index: "2",
      title: "整体视图",
      content: "整体视图",
    },
    {
      index: "2",
      title: "问题识别",
      content: "问题识别",
    },
    {
      index: "3",
      title: "问题定位",
      content: "问题定位",
    },
    {
      index: "4",
      title: "优化方案",
      content: "优化方案",
    },
    {
      index: "5",
      title: "后评估",
      content: "后评估",
    },
    {
      index: "6",
      title: "系统管理",
      content: "系统管理",
    },
  ],

  6: [
    {
      index: "1",
      title: "退服覆盖补偿",
      content: "退服覆盖补偿",
    },
    {
      index: "2",
      title: "补偿黑名单",
      content: "补偿黑名单",
    },
    {
      index: "3",
      title: "实时监控",
      content: "实时监控",
    },
    {
      index: "4",
      title: "补偿工单管理",
      content: "补偿工单管理",
    },
    {
      index: "5",
      title: "补偿后评估",
      content: "补偿后评估",
    },
    {
      index: "6",
      title: "系统管理",
      content: "系统管理",
    },
  ],

  7: [
    {
      index: "1",
      title: "隐患识别",
      content: "隐患识别",
    },
    {
      index: "2",
      title: "指令巡检",
      content: "指令巡检",
    },
    {
      index: "3",
      title: "处理方案",
      content: "处理方案",
    },
    {
      index: "4",
      title: "故障处理",
      content: "故障处理",
    },
    {
      index: "5",
      title: "运维管控",
      content: "运维管控",
    },
    {
      index: "6",
      title: "规则配置",
      content: "规则配置",
    },
    {
      index: "7",
      title: "系统管理",
      content: "系统管理",
    },
  ],
  8: [
    {
      index: "1",
      title: "节能看板",
      content: "节能看板",
    },
    {
      index: "2",
      title: "策略管理",
      content: "策略管理",
    },
    {
      index: "3",
      title: "工单管理",
      content: "工单管理",
    },
    {
      index: "4",
      title: "任务管理",
      content: "任务管理",
    },
    {
      index: "5",
      title: "节能核查",
      content: "节能核查",
    },
    {
      index: "6",
      title: "节电量统计",
      content: "节电量统计",
    },
    {
      index: "7",
      title: "系统管理",
      content: "系统管理",
    },
    {
      index: "8",
      title: "重叠覆盖计算",
      content: "重叠覆盖计算",
    },
    {
      index: "9",
      title: "规则配置",
      content: "规则配置",
    },
  ],
});

onMounted(() => {
  rightContent.value = 1; // 直接设置为数字1，对应第一个菜单项
  proxy.$nextTick(() => {
    console.log("current menu items:", subMenuList[rightContent.value]);
  });
});

const handleActive = (e) => {
  // console.log(e);
  rightContent.value = e;
  // console.log(subMenuList[parseInt(rightContent.value)]);
};
</script>

<template>
  <div>
    <Header />
    <div class="container">
      <Side @active="handleActive" class="container-left" />
      <div class="container-right">
        <!-- {{ subMenuList[parseInt(rightContent)] }} -->
        <Card
          v-for="it in subMenuList[parseInt(rightContent)]"
          :key="it.index"
          :title="it.title"
          :content="it.content"
          class="card" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 60px);
}
.container-left {
  height: calc(100vh - 60px);
  background-color: #33485b;
}
.container-right {
  flex: 1;
  background-color: #000;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: #fff;
  overflow: auto;
}
.card {
  margin-bottom: 10px;
  width: 31%;
  margin-right: 10px;
}
.card:nth-child(3n) {
  margin-right: 0;
}
</style>
